<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="程月">
    <title>字数统计</title>
    <style>
        * {
            box-sizing: border-box;
        }

        main {
            width: 420px;
            margin: 50px auto;
            background-color: #eee;
            padding: 20px;
        }

        p {
            text-align: right;
        }

        span {
            font-size: 18px;
            color: orange;
        }
    </style>
</head>

<body>
    <main>
        <p>已输入<span>000</span>字</p>
        <textarea cols=50 rows=10></textarea>
    </main>

    <script src="./jquery.js"></script>
</body>

</html>
<script>
    $(document).bind('propertychange input', function () {
        var counter = $('textarea').val().length;
        var str = $('textarea').val();
        
        $('textarea').each(function (index) {
            if (str.charCodeAt(0) > 255) {
                counter++;
            } else {
                counter = counter + 0.5;
            }
        });

        $('span').text(counter);
        if (counter > 20) {
            $('span').css('color', 'red');
        } else {
            $('span').css('color', 'orange');
        }

    })

</script>